import { Input, InputProps } from 'antd'
import { useState } from 'react'
import './index.scss'
interface IProps extends InputProps {
  onBlur?: () => void
  fontSize?: string
  placeholdertext?: string
}
export default function MyInput(props: IProps) {
  let {
    onBlur = () => {},
    value = '',
    fontSize = '1rem',
    placeholdertext = '',
  } = props
  const [isEdit, setIsEdit] = useState<boolean>(false)

  if (!isEdit) {
    return (
      <div
        className="mytext"
        style={{ fontSize: fontSize }}
        onClick={() => setIsEdit(true)}>
        {value
          ? value.toString()
          : placeholdertext
          ? placeholdertext
          : '点击编辑'}
      </div>
    )
  }

  return (
    <Input
      className="mytext"
      onBlur={() => {
        onBlur()
        setIsEdit(false)
      }}
      {...props}></Input>
  )
}
